<template>
  <!-- 业务信息 -->
  <div class="business-info">
    <div class="p-title">添加业务</div>
    <el-tabs class="mt-12" type="card" v-model="currentBusinessIndex">
      <el-tab-pane
        :label="item.name"
        :name="item.id"
        v-for="(item, index) in businessList"
        :key="index"
        @change="currentBusinessIndex = item.id"
      >
      </el-tab-pane>
    </el-tabs>

    <div class="card-content">
      <el-checkbox-group>
        <el-checkbox
          class="service-item"
          v-for="(service, index) in serviceList"
          :key="index"
          :label="service.id"
          :value="service.id"
        >
          {{ service.name }}
        </el-checkbox>
      </el-checkbox-group>
    </div>

    <div class="p-title mt-12 mb-12">费用</div>
    <el-alert title="业务数据中类别和业务数量存在不一致，请核对后再提交" type="warning" show-icon :closable="false" />
    <div class="mt-12" :class="{ 'table-body-min-height': !businessServiceList.length }">
      <ProTable ref="proTable" :columns="columns" :data="businessServiceList" :toolButton="false" :pagination="false">
        <!-- Expand -->
        <template #expand="scope">
          {{ scope.row }}
        </template>

        <!-- 单价 -->
        <template #price="scope">
          <el-input-number class="table-input" v-model="scope.row.price" :controls="false" />
        </template>

        <!-- 数量 -->
        <template #count="scope">
          <el-input-number class="table-input" v-model="scope.row.count" />
        </template>

        <!-- 类别 -->
        <template #category="scope">
          <el-input
            class="table-input pointer"
            v-model="scope.row.category"
            readonly
            placeholder="请选择"
            :suffix-icon="ArrowDown"
            @click="categoryInputClick"
          />
          <!-- <el-select class="table-input" v-model="scope.row.category" placeholder="请选择">
            <el-option v-for="item in serviceList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select> -->
        </template>

        <!-- 小计 -->
        <template #subtotal="scope">
          <el-input-number class="table-input" v-model="scope.row.subtotal" :controls="false" />
        </template>

        <!-- 实收价格 -->
        <template #paidPrice="scope">
          <el-input-number class="table-input" v-model="scope.row.paidPrice" :controls="false" />
        </template>

        <!-- 操作 -->
        <template #operation="scope">
          <div class="flx">
            <el-button link type="primary" @click="copyRow(scope.row)">复制</el-button>
            <el-button link type="danger" class="operation-delete" @click="deleteRow(scope.$index)">删除</el-button>
            <el-button link type="primary" @click="bindingCustomerMaterials(scope.row)">绑定客户材料</el-button>
            <div v-if="false" class="flx-1 sle ml-12 text-primary">绑定客户材料绑定客户材料</div>
          </div>
        </template>
      </ProTable>
      <div class="total flx-justify-between">
        <div class="text">合计</div>
        <div class="desc">7900.00<span class="text-grey">（包含：官费900.00 + 营业执照费300.00 + 代理费1500.00）</span></div>
      </div>
    </div>

    <!-- 选择商标分类 -->
    <zc-trademark-category v-if="showTrademarkCategory" ref="trademarkCategoryRef" @close="showTrademarkCategory = false" />

    <!-- 绑定客户材料 -->
    <bind-client-materials
      v-if="showBindClientMaterials"
      ref="bindClientMaterialsRef"
      @close="showBindClientMaterials = false"
    ></bind-client-materials>
  </div>
</template>

<script lang="tsx" setup>
import { ref } from "vue";
import { ArrowDown } from "@element-plus/icons-vue";
import ProTable from "@/components/ProTable/index.vue";
import ZcTrademarkCategory from "@/components/zcTrademarkCategory/index.vue";
import BindClientMaterials from "../ClientMaterials/BindClientMaterials.vue";

const currentBusinessIndex = ref(1);

// 业务列表
const businessList = ref([
  { id: 1, name: "商标服务" },
  { id: 2, name: "专利服务" },
  { id: 3, name: "版权服务" }
]);

// 业务列表 服务内容
const serviceList = ref([
  { id: 1, name: "商标注册（普通）个人" },
  { id: 2, name: "商标注册（普通）个人" },
  { id: 3, name: "商标注册（普通）个人" },
  { id: 4, name: "商标注册（普通）个人" }
]);

const columns = ref([
  {
    type: "index",
    label: "序号",
    width: 56
  },
  {
    prop: "name",
    label: "业务名称",
    minWidth: 112
  },
  {
    prop: "price",
    label: "单价(元)",
    minWidth: 91
  },
  {
    prop: "count",
    label: "数量(个)",
    minWidth: 99
  },
  {
    prop: "category",
    label: "类别",
    minWidth: 166
  },
  {
    prop: "subtotal",
    label: "小计(元)",
    minWidth: 97
  },
  {
    prop: "paidPrice",
    label: "实收价格(元)",
    minWidth: 104
  },
  {
    prop: "operation",
    label: "操作",
    minWidth: 192
  }
]);

// 已选择的业务服务列表
const businessServiceList = ref([
  {
    name: "商标注册（普通）个人",
    price: 100,
    count: 1,
    category: "商标注册（普通）个人",
    subtotal: 100,
    paidPrice: 100
  }
]);

// 选择商标类别
const trademarkCategoryRef = ref();
const showTrademarkCategory = ref(false);
const categoryInputClick = () => {
  showTrademarkCategory.value = true;
};

// 复制
const copyRow = row => {
  businessServiceList.value.push({ ...row });
};

// 刪除
const deleteRow = index => {
  businessServiceList.value.splice(index, 1);
};

// 绑定客户材料
const showBindClientMaterials = ref(false);
const bindClientMaterialsRef = ref();
const bindingCustomerMaterials = row => {
  showBindClientMaterials.value = true;
};
</script>

<style lang="scss" scoped>
.business-info {
  padding-bottom: 24px;
}
.card-content {
  border: 1px solid var(--el-border-color-light);
  margin-top: -16px;
  border-radius: 0 4px 4px 4px;
  padding: 14px;

  .service-item {
    margin-right: 10px;
    width: calc(33.33% - 10px);
    margin-bottom: 4px;
  }
}

.total {
  height: 40px;
  background: #fef0f0;
  line-height: 40px;
  border: 1px solid #ebeef5;
  border-top: 0;
  padding: 0 12px;

  span {
    font-size: 12px;
  }
}
</style>
